<template>
  <div class="box app-container">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never" :body-style="{height:'calc(100vh - 230px)'}">
          <el-button type="primary" @click="popoverImg">点击打开头像裁剪</el-button>
          <el-dialog
            title="提示"
            :visible.sync="editAvatarDialog"
            width="30%"
            :before-close="handleClose">
            <div class="flex">
              <div class="left">
                <ImgCutter
                  v-if="editAvatarDialog"
                  ref="imgCutterModal"
                  label="选择本地图片"
                  fileType="jpeg"
                  :crossOrigin="true"
                  crossOriginHeader="*"
                  rate=""
                  toolBgc="none"
                  :isModal="false"
                  :showChooseBtn="true"
                  :lockScroll="true"
                  :boxWidth="274"
                  :boxHeight="274"
                  :cutWidth="250"
                  :cutHeight="250"
                  :sizeChange="true"
                  :moveAble="true"
                  :imgMove="true"
                  :originalGraph="false"
                  :WatermarkTextX="0.95"
                  :WatermarkTextY="0.95"
                  :smallToUpload="true"
                  :saveCutPosition="true"
                  :scaleAble="true"
                  :previewMode="true"
                  :quality="1"
                  :toolBoxOverflow="true"
                  @onChooseImg="onChooseImg"
                  @onPrintImg="onPrintImg"
                  @cutDown="cutDown">
                </ImgCutter>
              </div>
              <div class="right">
                <div class="circle">
                  <el-image
                    style="width: 128px; height: 128px"
                    :src="imgUrl"
                    fit="fit"></el-image>
                </div>
                <div class="rect">
                  <el-image
                    style="width: 128px; height: 128px"
                    :src="imgUrl"
                    fit="fit"></el-image>
                </div>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="editAvatarDialog = false">取 消</el-button>
              <el-button type="primary" @click="saveImage">上传并保存</el-button>
             </span>
          </el-dialog>

        </el-card>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ImgCutter from 'vue-img-cutter';
export default {
  name: 'cropper',
  components: { ImgCutter },
  data() {
    return {
      avatarURL: require("@/assets/images/vue.png"),
      editAvatarDialog: false,
      imgUrl:''
    }
  },
  mounted() {
    this.imgUrl = this.$store.getters.avatar
  },
  computed: {
    ...mapGetters([
      'avatar'
    ])
  },
  methods: {
    popoverImg(){
      this.editAvatarDialog = true
    },
    saveEditAvatar(){},
    cutDown(res){
      this.imgUrl = res.dataURL
    },
    onChooseImg(res){
      this.imgUrl = res.dataURL
    },
    onPrintImg(res){
      this.imgUrl = res.dataURL
    },
    saveImage(){
      this.$store.commit('user/SET_AVATAR',this.imgUrl)
      this.editAvatarDialog = false
      this.$message({
        type:'success',
        message: '模拟保存成功。',
      })
    },
    handleClose(){

    }

  }

}
</script>

<style scoped lang="scss">
.box {
  padding-bottom: 20px;
  ::v-deep.copyright,::v-deep.i-dialog-footer{
    display: none!important;
  }
  ::v-deep.el-dialog{
    width: 470px;
    .left{
      margin-right: 20px;
    }
    .right{
      .circle{
        overflow: hidden;
        margin-bottom: 10px;
        .el-image{
          width: 128px;
          height: 128px;
          border-radius: 50%;
        }
      }
      .rect{
        .el-image{
          width: 128px;
          height: 128px;
        }
      }
    }
  }

}
</style>
